<template>
  <div class="message-detail">
  	<shop-header ref="shopHeader">	
			<h2>消息详情</h2>	
		</shop-header>
		<div class="detail-wrapper">
			<div class="detail-top bottom-1px">
				<h3 class="title">{{ detailData.title }}</h3>
				<div class="datetime"><i class="iconfont icon-shijian"></i><span>{{ detailData.createAt }}</span></div>
			</div>
			<div class="content" v-html="detailData.content"></div>
		</div>
  </div>
</template>

<script>
import ShopHeader from '@/components/public/ShopHeader'
import http from '@/utils/http'

export default {
	components: {
		ShopHeader
	},
	data () {
		return {
			detailData: {}
		}
	},
  mounted () {
  	let that = this
  	let id = this.$route.query.id
  	http.get('/api/v1/getMessageDetail', { id }, false, res => {
  		if (res.status == 1) {
  			this.detailData = res.data
  		}
  	})
		this.$el.onscroll = function () {
  		that.$refs.shopHeader.isShow = false
		}
  } 
}
</script>

<style scoped>
.message-detail {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	overflow: auto;
	background: #fff;
}
.detail-top {
	padding: 10px 15px;
}
.detail-top h3 {
	font-size: 16px;
	color: #333;
	line-height: 24px;
}
.datetime {
	color: #999;
	font-size: 0;
	line-height: 14px;
	padding-top: 8px;
}
.datetime i {
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	margin-right: 5px;
}
.datetime span {
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	color: #999;
}
.content {
	padding: 10px 15px;
	font-size: 14px;
	line-height: 30px;
	color: #666;
}
</style>
